import React, { useMemo, useState, useContext } from 'react'
import Mynav from './components/Mynav'
import { Tabs, ProductCard, Tag, Button, Space } from 'react-vant'
import Ctx from '../store/Ctx'
import { Star } from '@react-vant/icons';

export default function Sublist() {

  //获取数据
  let obj = useContext(Ctx)

  //定义一个状态
  let [index, setIndex] = useState(1)

  //通过缓存属性 过滤出符合条件的数据 显示在页面上
  let newIndex = useMemo(() => {
    return obj.datalist.filter(item => {
      if (item.typeId == index && item.sub)
        return item
    })
  }, [obj.datalist, index])

  return (
    <div>
      {/* 导航栏 */}
      <Mynav title={'订阅页'} leftText={true}></Mynav>

      {/* 标签页 */}
      <Tabs onChange={(e) => {
        setIndex(e + 1)
      }}>
        {['推荐', '小说', '儿童'].map(item => (
          <Tabs.TabPane key={item} title={item}></Tabs.TabPane>
        ))}
      </Tabs>

      {/* 商品卡片 渲染数据 */}
      {
        newIndex.map(item => {
          return <ProductCard
            num={<>
              <Space>
                <span style={{ position: 'relative', top: '5px' }}
                  onClick={() => {
                    //切换收藏状态的方法
                    obj.dispatch({
                      type: 'change_collect',
                      payload: item.id
                    })
                  }}>
                  <Star color={item.collect ? 'red' : ''} />
                </span>
                <Button round size='mini' type={item.sub ? 'warning' : 'default'}
                  onClick={() => {
                    //切换订阅的方法
                    obj.dispatch({
                      type: 'change_sub',
                      payload: item.id
                    })
                  }}>
                  {item.sub ? '已经订阅' : '免费订阅'}
                </Button>
              </Space>
            </>}
            key={item.id}
            desc={item.ms}
            title={item.title}
            thumb={item.img}
          />
        })
      }

    </div>
  )
}
